<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Toggle Menu</title>
    <style>
        .no-overflow {
            overflow-x: hidden !important;
        }
        .no-overflow > * {
            max-width: 100% !important;
            word-break: break-word !important;
        }
        .menu-list {
            opacity: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            background: linear-gradient(to bottom right, aqua 0%, #ef74d1 100%);
            backdrop-filter: blur(5px);
            position: absolute;
            top: 0;
            left: 0;
            padding: 0;
            border-radius: inherit;
            list-style-type: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity 0.3s;
        }
        .menu-list li a {
            text-decoration: none;
            color: #000;
            display: block;
            margin: 8px 0;
            font-size: 1.3rem;
            text-align: center;
            transition: font-size 0.2s;
            position: relative;
        }
        .menu-list li a::after {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 0;
            height: 1px;
            width: 100%;
            background-color: #000;
            transform: scaleX(0);
            transition: 0.3s;
        }
        .menu-list a:hover::after {
            transform: scaleX(1);
        }
        input {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 30px;
            height: 30px;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 100;
            border: none;
            -webkit-appearance: none;
        }
        input::after {
            content: "+";
            background: linear-gradient(to bottom right, #0066ff 0%, #ff33cc 100%);
            height: 30px;
            border-radius: 50rem;
            width: 30px;
            color: #f4ecec;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0;
            left: 0;
            font-size: 1.5rem;
            transition: transform 0.3s;
            cursor: pointer;
        }
        input:checked::after {
            transform: rotate(45deg);
        }
        input:checked + .menu-list {
            opacity: 1;
            pointer-events: auto;
        }
        body {
            height: 100vh;
            margin: 0;
            display: grid;
            place-items: center;
            background: linear-gradient(to bottom right, #0066ff 0%, #ff33cc 100%);
            font: 90%/1 "Montserrat", sans-serif;
            line-height: 1.4;
        }
        .area {
            position: relative;
            background: linear-gradient(to bottom right, #fbfbfb 0%, #a6a3a5 100%);
            padding: 2rem;
            overflow-y: hidden;
            border-radius: 8px;
            width: 300px;
            box-shadow: 0 0.66rem 2.4rem #0d47a1;
            position: relative;
        }
        h1 {
            line-height: 1.24;
            margin: 0 0 1rem 0;
        }
        h4{
            margin-top:0;
        }
    </style>
  </head>
  <body>
    <div class="area no-overflow">
      <h1>Pure CSS Toggle Menu</h2>
      <h4>Click on <b>+</b> to see some CSS magic</h4>

      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ad maxime
        dolor incidunt totam animi impedit dolore voluptate, ullam
        exercitationem reiciendis corporis libero, consequuntur odio alias rem
        possimus aliquam omnis vitae?
      </p>



      <img src="https://assets.codepen.io/3/flourish_1.png" alt="" />
      <input type="checkbox" />
      <ul class="menu-list">
        <li><a href="#">Home</a></li>
        <li><a href="#">Team</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </body>
</html>
